<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" v-model="open" width="680px" append-to-body @close="close">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="上级菜单">
                        <el-select v-model="form.parentName" placeholder="请选择上级菜单" clearable>
                            <el-option :value="parentMenuData" style="height: auto;">
                                <el-tree :data="menuOptions"
                                         :props="menuTreeProps"
                                         node-key="menuId"
                                         accordion
                                         highlight-current
                                         @node-click="selectMenuParentId"
                                ></el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio label="M">目录</el-radio>
                            <el-radio label="C">菜单</el-radio>
                            <el-radio label="F">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item v-if="form.menuType != 'F'" label="菜单图标">
                        <el-popover placement="bottom-start" trigger="click">
                            <template #reference>
                                <el-input v-model="form.icon" placeholder="点击选择图标" readonly>
                                    <template #prefix>
                                        <svg-icon v-if="form.icon" :name="form.icon"/>
                                    </template>
                                </el-input>
                            </template>
                            <el-select v-model="form.icon" style="height: auto;">
                                <el-option v-for="(svgInfo) in svgList" :value="svgInfo">
                                    <svg-icon :name="svgInfo"></svg-icon>
                                    <span>{{svgInfo}}</span>
                                </el-option>
                            </el-select>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="orderNum">
                        <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否外链" v-if="form.menuType != 'F'">
                        <span slot="label">
                            <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </span>
                        <el-radio-group v-model="form.isFrame">
                            <el-radio :label="0">是</el-radio>
                            <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="路由地址" v-if="form.menuType != 'F'" prop="path">
                        <el-input v-model="form.path" placeholder="请输入路由地址">
                            <template #prefix>
                                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType == 'C'">
                    <el-form-item label="组件路径" prop="component">
                        <el-input v-model="form.component" placeholder="请输入组件路径">
                            <template #prefix>
                                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.menuType != 'M'">
                    <el-form-item label="权限字符">
                        <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100">
                            <template #prefix>
                                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                                            placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示状态" v-if="form.menuType != 'F'">
                        <span slot="label">
                            <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </span>
                        <el-radio-group v-model="form.visible">
<!--                            <el-radio v-for="dict in visibleOptions"-->
<!--                                      :key="dict.dictValue"-->
<!--                                      :label="dict.dictValue">-->
<!--                                {{dict.dictLabel}}-->
<!--                            </el-radio>-->
                            <el-radio :label="0">显示</el-radio>
                            <el-radio :label="1">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单状态" v-if="form.menuType != 'F'">
                        <span slot="label">
                            <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </span>
                        <el-radio-group v-model="form.status">
<!--                            <el-radio v-for="dict in statusOptions" :key="dict.dictValue"-->
<!--                                      :label="dict.dictValue">-->
<!--                                {{dict.dictLabel}}-->
<!--                            </el-radio>-->
                            <el-radio :label="0">显示</el-radio>
                            <el-radio :label="1">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否缓存" v-if="form.menuType == 'C'">
                        <span slot="label">
                            <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </span>
                        <el-radio-group v-model="form.isCache">
                            <el-radio :label="0">缓存</el-radio>
                            <el-radio :label="1">不缓存</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    const modules = import.meta.glob("/src/assets/icons/svg/*.svg")

    import {updateSysMenu, addSysMenu} from '/src/api/system/menu'

    export default {
        name: "update",
        emits: ['dialogStatusChanged'],
        props: {
            open: Boolean,
            title: String,
            form: Object,
            menuOptions: Array,
        },
        data() {
            return {
                visibleOptions: [],
                statusOptions: [],
                svgList: [],
                menuTreeProps: {
                    children: 'children',
                    label: 'menuName'
                },
                parentMenuData: {},
                // 表单校验
                rules: {
                    menuName: [
                        {required: true, message: "菜单名称不能为空", trigger: "blur"}
                    ],
                    orderNum: [
                        {required: true, message: "菜单顺序不能为空", trigger: "blur"}
                    ],
                    path: [
                        {required: true, message: "路由地址不能为空", trigger: "blur"}
                    ]
                }
            }
        },
        created() {
            //查询所有的svg
            for (const path in modules) {
                let svgIcon = path.replace('/src/assets/icons/svg/', '')
                svgIcon = svgIcon.substring(0, svgIcon.indexOf("."))
                this.svgList.push(svgIcon)
            }
            this.getDicts("sys_normal_disable").then(response => {
                this.statusOptions = response.data;
            });
            this.getDicts("sys_show_hide").then(response => {
                this.visibleOptions = response.data;
            });
        },
        methods: {
            //提交
            submitForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.form.menuId != undefined) {
                            updateSysMenu(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.close();
                            });
                        } else {
                            addSysMenu(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.close();
                            });
                        }
                    }
                })
            },
            //取消
            cancel() {
                this.$emit('dialogStatusChanged', false)
            },
            //关闭
            close() {
                this.$emit('dialogStatusChanged', false)
            },
            //选择上级菜单
            selectMenuParentId(data, node, nodeData) {
                this.parentMenuData = data
                this.form.parentName = data.menuName
                this.form.parentId = data.menuId
            },
        },
    }
</script>

<style type="scss" scoped>

    /*.el-select-dropdown__item {*/
    /*    height: 200px;*/
    /*}*/

</style>
